<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ include file="/JSP/include.jsp"%>

<portlet:actionURL var="getInput">
	<portlet:param name="action" value="getInput" />
</portlet:actionURL>
<portlet:renderURL var="getServerlist">
	<portlet:param name="action" value="servicelist" />
</portlet:renderURL>

<script type="text/javascript">
	var count = 1;
	function addFileInput() {
	
		   var tbl = document.getElementById('moreUploads');
  		   var lastRow = tbl.rows.length;
		   var row = tbl.insertRow(lastRow);
		   
		   var cellLeft = row.insertCell(0);
  		   var textNode = document.createTextNode("");
  		   cellLeft.appendChild(textNode);
  		   cellLeft.align = 'right';
		   
		   var cellRight = row.insertCell(1);
		   
	
		   var newfile = document.createElement("input");
		   newfile.type = "file";
		   newfile.name = "inputFile[" + count + "]";
		   newfile.size = "20";
		   cellRight.appendChild(newfile);
		   count++;
	}
	
	function toggle() {
		//var divs =   document.getElementByTagNames('div');
		var sorh = document.getElementById('usages')
		var oBtn = document.getElementById('showhide')
		
		
		if (sorh.style.display=='none') {
			sorh.style.display = 'block'
			oBtn.value='Hide Help'
		} else {
			sorh.style.display = 'none'
			oBtn.value='Show Help'
		}
	}
	
	$(document).ready(function() { 
	    $('#usages').hide();  
	    
	    $.formValidator.initConfig({formID:"submitform",
		onError:function(msg,obj,errorlist){
			$("#errorlist").empty();
			$.map(errorlist,function(msg){
				$("#errorlist").append("<li><font color="+"red"+"> " + msg + "</font></li>")
			});
		},
		submitAfterAjaxPrompt : 'Validating! Please wait...'
	});
	$("#command").formValidator({onShow:"Please Enter a command",onFocus:"See help for command detail",onCorrect:"Command Entered"}).inputValidator({min:1,onError:"please enter a command"});
	});
	
</script>

<div class="csp_wrap">
	<div class="csp_leftmenu"><%@ include file="/JSP/leftsidebar.jsp"%></div>
	<div class="csp_content">
			<h3>
				<table width="100%">
				<tr>
				<td>
				${appname}'s Submit Form
				</td>
				<td align="right">
				<a href="<portlet:renderURL>
				         <portlet:param name="action" value="servicelist"/>
				         </portlet:renderURL>" class="ui-linkButton"><span style="font: 12;">Back</span></a>
				</td>
				</tr>
				</table>
			</h3>
			
			<ul id="errorlist"></ul> 
			<form:form id="submitform" action="${getInput}" enctype="multipart/form-data" method="post">
			
			  		<table id="moreUploads" class="ui-table ui-table-hoverIsolate" cellPadding="5px" width="100%">
			  		
			  		  <tr>
			  			<th align="right">Insert command line here:</th>
					    <td ><input type="text" name="command" id="command"  style="width:200px" value="">
							<div id="commandTip" style="width:200px" class="ui-text-note"></div>
						</td>
			  		  </tr>
			  		  <tr>
			  			<th align="right">Choose input file:</th>
				       	<td style="border: 0px;" colspan="2"><input type="file" name="inputFile[0]" value="" size="15"/></td>
					  </tr>
					</table>
					<table id="buttons" class="ui-table-hoverIsolate" cellPadding="5px" width="100%">
					  <tr>
						 <td align="center" colspan="4">
						    <input type="submit" value="Submit" name="check" 
						    	onmouseover="this.style.borderColor='#75cd02'" 
						    	onmouseout="this.style.borderColor='#dcdcdc'" 
						    	class="btn1 pbtn1" 
						    	style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); ">
						    <input type="submit" value="Reset" name="check"
						    	onmouseover="this.style.borderColor='#f76b00'" 
						    	onmouseout="this.style.borderColor='#dcdcdc'" 
						    	class="btn2 pbtn1" 
						    	style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); ">
						    <input type="button" onClick="addFileInput();" 
						           value="Another File" id="moreUploadsLink"
						            onmouseover="this.style.borderColor='#86c6f7'" 
						            onmouseout="this.style.borderColor='#dcdcdc'" 
						            class="btn3 pbtn1" 
						            style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); ">
						            
						     <input type="button" value='Show Help' onclick='toggle();' id = 'showhide'
						     		onmouseover="this.style.borderColor='#86c6f7'" 
						            onmouseout="this.style.borderColor='#dcdcdc'" 
						            class="btn3 pbtn1" 
						            style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); ">  
						 </td>	
					  </tr>
					</table>
			
			</form:form>
			
			<div id = "usages" >
				
				<p class="manual" >${usage} </p>
			    <p class="manual" >Usage Info:
				    <c:forEach items="${infos}" var="info">
				    	<pre>${info}</pre>
				    </c:forEach>
			</div>
</div>
</div>
